<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>排版样式</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
</head>
<body style="margin:50px">
<p><span style="color:red">注:</span>屏幕四周都空出了50px 是 body 加了css</p>
<p style="text-align:center">下面是p标签</p>
<p >Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">下面是h标签</p>
	<h1>Bootstrap <small>框架</small></h1>
<h2>Bootstrap <small>框架</small></h2>
<h3>Bootstrap <small>框架</small></h3>
<h4>Bootstrap <small>框架</small></h4>
<h5>Bootstrap 框架</h5>
<h6>Bootstrap <small>框架</small></h6>

<p>Bootstrap <mark>用mark加淡黄色</mark></p>

<del>Bootstrap 用del 加删除线</del>

<s>BoBootstrap 用s标签删除</s>
<ins>BoBootstrap 用ins加下划线</ins>
<u>BoBootstrap 用u标签加下划线</u>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">下面各种强调的文本</p>
<small>Bootstrap 框架  标准字号的 85%</small>	<br/>

<strong>Bootstrap 框架  加粗 700 </strong>	<br/>

<em>Bootstrap 框架 //倾斜</em>	<br/>
 <small>Bootstrap 框架 用small标签</small><br/>
 
 <strong>加粗显示</strong>
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">下面对齐方式</p>

<p class="text-left">靠左显示</p>
<p class="text-center">中间显示文本</p>
<p class="text-right">Bootstrap 靠右显示</p>


<p class="text-nowrap" style="border:1px solid red;width:50px;">text-nowrap不换行不换行不换行不换行</p>
<p style="border:1px solid red;width:50px;">对比换行对比换行对比换行对比换行</p>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">大小写</p>

<h1><abbr class="initialism">Bootstrap</abbr> 在页面上把小写都转成大写</h1>
<p class="text-lowercase">Bootstrap 框架  //小写 </p> 

<p class="text-uppercase">Bootstrap 框架  //大写 </p> 

<p class="text-capitalize">Bootstrap 框架  //首字母大写 </p>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">地址</p>

<address>
<strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890 </address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>


底部空出了20px
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">引用文本</p>
<blockquote>
	引用文本：防护跌幅i好烦i好东方红度都会
</blockquote>
<br/>

<blockquote class="pull-right">
	居右引用文本：附近的合法iufhruigferfhfri
</blockquote> 
<br/><br/>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">列表排版</p>

<br/>
<ul class="list-unstyled list-inline">
	<li>ul  li 排列显示</li>
	<li>list-unstyled 取消小圆点</li>
	<li>list-inline横向排版</li>
	<li>Bootstrap 框架</li>
	<li>Bootstrap 框架</li>
</ul> <br/>

<ul class="list-unstyled"> 
     <li>Bootstrap 框架 // class="list-unstyled"移除默认样式 </li> 
	 <li>Bootstrap 框架</li>
	 <li>Bootstrap 框架</li> 
	 <li>Bootstrap 框架</li> 
	 <li>Bootstrap 框架</li>

</ul>
<br/>

<ul class="list-inline"> 
     <li>Bootstrap 框架 // class="list-inline"设置成内联样式 </li> 
	 <li>Bootstrap 框架</li>
	 <li>Bootstrap 框架</li> 
	 <li>Bootstrap 框架</li> 
	 <li>Bootstrap 框架</li>

</ul>
<br/>
<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">水平排列描述列表</p>
<dl class="dl-horizontal">

<dt>标题在左边</dt>

<dd>内容在右边，ootstrap提供了一些常规设计好的页面排版的样式供开发者使用。</dd>


</dl>

<br/>对照<br/>
<dl>

<dt>标题在上面</dt>

<dd>内容在下面，strap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>

<BR/>
<dl class="dl-horizontal">
	<dt>标题栏</dt>
	<dd>  dl-horizontal标题和内容都在水平方向显示 ， 注意内容不跑道标题里去--------  Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。稳定的的速度放缓斯蒂芬的发生的教科书地方减肥速度和福克斯的灵魂的房价松动还是打击开发商都很健康良好的的发动快攻得分率进口铃木吉姆一些常规设计好的页面排版的样式供开发者使用。稳定的的速度放缓斯蒂芬的发生的教科书地方减肥速度和福克斯的灵魂的房价松动还是打击开发商都很健康良好的的发动快攻得分率进口铃木吉</dd>
</dl>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">代码</p>

//内联代码

<code>&lt;section&gt;</code>
<br/>对照<br/>
&lt;section&gt;<br/>
//用户输入

press(输入) <kbd>ctrl + ,</kbd>

<br/>对照<br/>
press(输入) ctrl + ,


<pre>&lt;p&gt;Please input.原样输出..&lt;/p&gt;</pre>



<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />

<p style="text-align:center">当前屏幕测试</p>
<div class="visible-lg-block">大屏幕</div>
<div class="visible-md-block">中屏幕</div>
<div class="visible-sm-block">小屏幕</div>
<div class="visible-xs-block">手机屏幕</div>
 





<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>